{% extends 'base_dashboard.html' %}

{% block title %}Student Dashboard — Online LMS{% endblock %}

{% block extra_css %}
<style>
  .sd-stat { border-radius:.875rem; overflow:hidden; border:0; transition:transform .15s, box-shadow .15s; }
  .sd-stat:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.1) !important; }
  .sd-stat .ss-accent { height:3px; }
  .sd-stat .ss-body { padding:1rem 1.25rem; display:flex; align-items:center; gap:.875rem; }
  .sd-stat .ss-icon { width:44px; height:44px; border-radius:.625rem; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
  .sd-course-card .sd-thumb { height:130px; object-fit:cover; }
  .sd-course-card .sd-thumb-ph { height:130px; display:flex; align-items:center; justify-content:center; }
</style>
{% endblock %}

{% block content %}
<div class="mb-4">
    <h4 class="fw-bold mb-1">My Learning Dashboard</h4>
    <p class="text-muted small mb-0">Welcome back, <strong>{{ request.user.get_display_name }}</strong></p>
</div>

<!-- Stats -->
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="card sd-stat shadow-sm">
            <div class="ss-accent bg-success"></div>
            <div class="ss-body">
                <div class="ss-icon bg-success bg-opacity-10"><i class="bi bi-book-fill text-success"></i></div>
                <div>
                    <div class="fw-bold fs-4 lh-1 text-dark">{{ approved_count }}</div>
                    <div class="text-muted" style="font-size:.75rem;">Active Courses</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card sd-stat shadow-sm">
            <div class="ss-accent" style="background:#d97706;"></div>
            <div class="ss-body">
                <div class="ss-icon" style="background:#fffbeb;"><i class="bi bi-hourglass-split" style="color:#d97706;"></i></div>
                <div>
                    <div class="fw-bold fs-4 lh-1 text-dark">{{ pending_count }}</div>
                    <div class="text-muted" style="font-size:.75rem;">Pending</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card sd-stat shadow-sm">
            <div class="ss-accent bg-danger"></div>
            <div class="ss-body">
                <div class="ss-icon bg-danger bg-opacity-10"><i class="bi bi-x-circle-fill text-danger"></i></div>
                <div>
                    <div class="fw-bold fs-4 lh-1 text-dark">{{ rejected_count }}</div>
                    <div class="text-muted" style="font-size:.75rem;">Rejected</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card sd-stat shadow-sm">
            <div class="ss-accent" style="background:#1a56db;"></div>
            <div class="ss-body">
                <div class="ss-icon" style="background:#eff6ff;"><i class="bi bi-journal-bookmark-fill" style="color:#1a56db;"></i></div>
                <div>
                    <div class="fw-bold fs-4 lh-1 text-dark">{{ enrollments.count }}</div>
                    <div class="text-muted" style="font-size:.75rem;">Total</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Active Courses -->
{% if approved_courses %}
<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-header bg-white rounded-top-4 border-0 px-4 py-3 d-flex justify-content-between align-items-center">
        <h5 class="fw-bold mb-0"><i class="bi bi-play-circle text-success me-2"></i>Continue Learning</h5>
        <a href="{% url 'courses:course_list' %}" class="btn btn-sm" style="background:#dcfce7;color:#15803d;border:none;">Browse More</a>
    </div>
    <div class="card-body p-4 pt-2">
        <div class="row g-3">
            {% for enrollment in approved_courses %}
            <div class="col-md-6 col-lg-4">
                <div class="card sd-course-card border-0 shadow-sm rounded-3 h-100">
                    {% if enrollment.course.thumbnail %}
                        <img src="{{ enrollment.course.thumbnail.url }}" class="card-img-top rounded-top-3 sd-thumb w-100" alt="{{ enrollment.course.title }}">
                    {% else %}
                        <div class="sd-thumb-ph bg-success bg-opacity-10 rounded-top-3">
                            <i class="bi bi-book-half text-success" style="font-size:2.5rem;"></i>
                        </div>
                    {% endif %}
                    <div class="card-body p-3">
                        <h6 class="fw-bold mb-1 small">{{ enrollment.course.title|truncatechars:40 }}</h6>
                        <p class="text-muted small mb-3">{{ enrollment.course.short_description|truncatechars:60 }}</p>
                        <a href="{% url 'courses:course_detail' slug=enrollment.course.slug %}" class="btn btn-sm w-100"
                           style="background:#dcfce7;color:#15803d;border:none;">
                            <i class="bi bi-play-circle me-1"></i>Continue Learning
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

<!-- Pending Enrollments -->
{% if pending_count > 0 %}
<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-header bg-white rounded-top-4 border-0 px-4 py-3">
        <h5 class="fw-bold mb-0"><i class="bi bi-hourglass-split me-2" style="color:#d97706;"></i>Awaiting Approval</h5>
    </div>
    <div class="card-body p-4 pt-2">
        {% for enrollment in enrollments %}
            {% if enrollment.status == 'pending' %}
            <div class="d-flex align-items-center gap-3 py-2 {% if not forloop.last %}border-bottom{% endif %}">
                <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                     style="width:40px;height:40px;background:#fffbeb;">
                    <i class="bi bi-hourglass-split" style="color:#d97706;"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="fw-medium small">{{ enrollment.course.title }}</div>
                    <div class="text-muted small">Requested {{ enrollment.requested_at|date:"M d, Y" }}</div>
                </div>
                {% if not enrollment.payment_proof %}
                <a href="{% url 'enrollments:upload_payment' pk=enrollment.pk %}" class="btn btn-sm flex-shrink-0"
                   style="background:#fef3c7;color:#92400e;border:none;">
                    <i class="bi bi-upload me-1"></i>Upload Payment
                </a>
                {% else %}
                <span class="badge rounded-pill flex-shrink-0" style="background:#fef3c7;color:#92400e;font-size:.72rem;">
                    Payment Uploaded — Awaiting Review
                </span>
                {% endif %}
            </div>
            {% endif %}
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Rejected Enrollments -->
{% for enrollment in enrollments %}{% if enrollment.status == 'rejected' %}{% if forloop.first %}
<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-header bg-white rounded-top-4 border-0 px-4 py-3">
        <h5 class="fw-bold mb-0 text-danger"><i class="bi bi-x-circle me-2"></i>Rejected Enrollments</h5>
    </div>
    <div class="card-body p-4 pt-2">
{% endif %}
        <div class="d-flex align-items-start gap-3 py-2 {% if not forloop.last %}border-bottom{% endif %}">
            <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                 style="width:40px;height:40px;background:#fee2e2;">
                <i class="bi bi-x-circle text-danger"></i>
            </div>
            <div class="flex-grow-1">
                <div class="fw-medium small">{{ enrollment.course.title }}</div>
                {% if enrollment.rejection_reason %}
                <div class="text-danger small mt-1"><i class="bi bi-chat-left-text me-1"></i>{{ enrollment.rejection_reason }}</div>
                {% endif %}
                <div class="text-muted small">Rejected on {{ enrollment.approved_at|date:"M d, Y"|default:"—" }}</div>
            </div>
            <a href="{% url 'courses:course_detail' slug=enrollment.course.slug %}"
               class="btn btn-sm flex-shrink-0" style="background:#eff6ff;color:#1a56db;border:none;">
                Re-Apply
            </a>
        </div>
{% if forloop.last %}
    </div>
</div>
{% endif %}
{% endif %}{% endfor %}

<!-- Browse CTA -->
<div class="card border-0 rounded-4 p-4" style="background:linear-gradient(135deg,#1a56db,#0e3fa8);color:#fff;">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
        <div>
            <h5 class="fw-bold mb-1">Discover New Courses</h5>
            <p class="mb-0 small" style="opacity:.8;">Expand your skills with our expert-led courses.</p>
        </div>
        <a href="{% url 'courses:course_list' %}" class="btn btn-light text-primary fw-semibold px-4">
            <i class="bi bi-grid me-2"></i>Browse Courses
        </a>
    </div>
</div>
{% endblock %}